<template>
  <div class="overview">
    <div class="top">
      <div class="button-group">
        <button @click="changeLongitude(-5)">
          <BackwardOutlined style="font-size: 25px;" />
        </button>
        <button @click="changeLongitude(-1)">
          <CaretLeftOutlined style="font-size: 25px;" />
        </button>
        <a-select>
          <a-select-option :value="item.value" v-for="item in typeOptions" :key="item.label">{{
            item.value
            }}</a-select-option>
        </a-select>
      </div>
      <div class="longitude-display" id="longitude-display">{{ longitude }}</div>
      <div class="button-group">
        <button @click="changeLongitude(1)">
          <CaretRightOutlined style="font-size: 25px;" />
        </button>
        <button @click="changeLongitude(5)">
          <ForwardOutlined style="font-size: 25px;" />
        </button>
      </div>
    </div>
    <div class="bottom">
      <p
        style="width: 100%; height: 40px;margin-bottom: 0;background: #ccc;color:#000;text-align: center;line-height: 40px;">
        {{title}}</p>
      <div v-for="item,index in data.data">
        <p style="margin-bottom: 0;color: #fff;margin-left: 35px;">{{ item.group_title }}</p>
        <a-table :columns="columns" :data-source="item.data" :pagination="false">
          <!-- <template #_status="{ text, record }">
                        <a style="color: #fff" @click="handleClick(record)">{{ text }}</a>
                      </template> -->
        </a-table>
      </div>
  
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from 'vue'
import { CaretLeftOutlined, BackwardOutlined, CaretRightOutlined, ForwardOutlined } from '@ant-design/icons-vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
export default defineComponent({
  name: 'overview',
  components: {
    CaretLeftOutlined, BackwardOutlined, CaretRightOutlined, ForwardOutlined
  },

  setup() {
    onMounted(() => {
      get_list(2)
    })
    const router = useRouter();
    const typeOptions = ref([
      {
        value: 'w',
        label: 'M710a',
      },
      {
        value: 'e',
        label: 'M650',
      },
    ]);
    let longitude = ref(359)
    let timeoutId = null;
    function changeLongitude(value) {
      longitude.value += value;
      console.log(longitude.value)
      // Normalize longitude to keep it within -180 to 180 degrees
      if (longitude.value > 360) {
        longitude.value -= 360;
      }
      else if (longitude.value <= 0) {
        longitude.value += 360;
      }
      // get_list(longitude.value)
      if (timeoutId !== null) {
        clearTimeout(timeoutId);
      }

      // 设置新的定时器  
      timeoutId = setTimeout(function () {
        get_list(longitude.value);
      }, 1500); // 1秒后执行  
      // updateDisplay();
    }
    const handleClick: Function = (record) => {
      router.push({ path: '/satellite/detail', query: record });
    }

    const columns = [
      {
        title: '',
        dataIndex: '_position',
        defaultSortOrder: 'descend',
        width: 40
      },
      {
        title: '',
        dataIndex: 'sn',
        defaultSortOrder: 'descend',
        width: 40
      },
      {
        title: 'Channel',
        dataIndex: 'channel',
        filters: [
          {
            text: 'Joe',
            value: 'Joe',
          },
          {
            text: 'Jim',
            value: 'Jim',
          },
          {
            text: 'Submenu',
            value: 'Submenu',
            children: [
              {
                text: 'Green',
                value: 'Green',
              },
              {
                text: 'Black',
                value: 'Black',
              },
            ],
          },
        ],
        // specify the condition of filtering result
        // here is that finding the name started with `value`
        onFilter: (value: string, record: TableDataType) => record.name.indexOf(value) === 0,
        sorter: (a: TableDataType, b: TableDataType) => a.name.length - b.name.length,
        sortDirections: ['descend'],
        width: 150
      },
      {
        title: 'Type',
        dataIndex: 'type',
        defaultSortOrder: 'descend',
        filters: [
          {
            text: 'London',
            value: 'London',
          },
          {
            text: 'New York',
            value: 'New York',
          },
        ],
        filterMultiple: false,
        slots: { customRender: '_status' },
        onFilter: (value: string, record: TableDataType) => record.satelliteName.indexOf(value) === 0,
        width: 65
      },
      {
        title: 'Encryption',
        dataIndex: 'encryption',
        filters: [
          {
            text: 'London',
            value: 'London',
          },
          {
            text: 'New York',
            value: 'New York',
          },
        ],
        filterMultiple: false,
        onFilter: (value: string, record: TableDataType) => record.satelliteName.indexOf(value) === 0,
        sortDirections: ['descend', 'ascend'],
        width: 120
      },
      {
        title: 'Package',
        dataIndex: 'package',
        filters: [
          {
            text: 'London',
            value: 'London',
          },
          {
            text: 'New York',
            value: 'New York',
          },
        ],
        filterMultiple: false,
        onFilter: (value: string, record: TableDataType) => record.norad.indexOf(value) === 0,
        sortDirections: ['descend', 'ascend'],
        width: 150
      },
      {
        title: 'Res',
        dataIndex: 'res',
        filters: [
          {
            text: 'London',
            value: 'London',
          },
          {
            text: 'New York',
            value: 'New York',
          },
        ],
        filterMultiple: false,
        onFilter: (value: string, record: TableDataType) => record.cospar.indexOf(value) === 0,
        sortDirections: ['descend', 'ascend'],
        width: 60
      },
      {
        title: 'Compression',
        dataIndex: 'compression',
        filters: [
          {
            text: 'London',
            value: 'London',
          },
          {
            text: 'New York',
            value: 'New York',
          },
        ],
        filterMultiple: false,
        onFilter: (value: string, record: TableDataType) => record.satelliteModel.indexOf(value) === 0,
        sortDirections: ['descend', 'ascend'],
        width: 200
      },
      {
        title: 'V_PID',
        dataIndex: 'v_pid',
        filters: [
          {
            text: 'London',
            value: 'London',
          },
          {
            text: 'New York',
            value: 'New York',
          },
        ],
        filterMultiple: false,
        onFilter: (value: string, record: TableDataType) => record.operator.indexOf(value) === 0,
        sortDirections: ['descend', 'ascend'],
        width: 120
      },
      {
        title: 'A_PID',
        dataIndex: 'a_pid',
        filters: [
          {
            text: 'London',
            value: 'London',
          },
          {
            text: 'New York',
            value: 'New York',
          },
        ],
        filterMultiple: false,
        onFilter: (value: string, record: TableDataType) => record.launchsite.indexOf(value) === 0,
        sortDirections: ['descend', 'ascend'],
        width: 120
      },
      {
        title: 'SID',
        dataIndex: 'sid',
        filters: [
          {
            text: 'London',
            value: 'London',
          },
          {
            text: 'New York',
            value: 'New York',
          },
        ],
        filterMultiple: false,
        onFilter: (value: string, record: TableDataType) => record.launchmass.indexOf(value) === 0,
        sortDirections: ['descend', 'ascend'],
        width: 120
      },
      {
        title: 'Owner',
        dataIndex: 'owner',
        filters: [
          {
            text: 'London',
            value: 'London',
          },
          {
            text: 'New York',
            value: 'New York',
          },
        ],
        filterMultiple: false,
        onFilter: (value: string, record: TableDataType) => record.launchdate.indexOf(value) === 0,
        sortDirections: ['descend', 'ascend'],
        width: 120
      },
      {
        title: 'Date',
        dataIndex: 'date',
        filters: [
          {
            text: 'London',
            value: 'London',
          },
          {
            text: 'New York',
            value: 'New York',
          },
        ],
        filterMultiple: false,
        onFilter: (value: string, record: TableDataType) => record.comments.indexOf(value) === 0,
        sortDirections: ['descend', 'ascend'],
        width: 120
      },
      {
        title: '*',
        dataIndex: 'star',
        filters: [
          {
            text: 'London',
            value: 'London',
          },
          {
            text: 'New York',
            value: 'New York',
          },
        ],
        filterMultiple: false,
        onFilter: (value: string, record: TableDataType) => record.comments.indexOf(value) === 0,
        sortDirections: ['descend', 'ascend'],
        width: 120
      },
    ];

    let data = ref([
      // {
      //   _position: '1',
      //   _status: 'John Brown',
      //   age: 32,
      //   address: 'New York No. 1 Lake Park',
      // },
      // {
      //   _position: '2',
      //   name: 'Jim Green',
      //   age: 42,
      //   address: 'London No. 1 Lake Park',
      // },
      // {
      //   _position: '3',
      //   name: 'Joe Black',
      //   age: 32,
      //   address: 'Sidney No. 1 Lake Park',
      // },
      // {
      //   _position: '4',
      //   name: 'Jim Red',
      //   age: 32,
      //   address: 'London No. 2 Lake Park',
      // },
    ]);

    let title = ref('')
    function get_list(number) {
      axios.get(`/api/position?position=${number}`).then((res) => {
        title.value = res.data.data.result.data.title
        data.value = res.data.data.result.data
      })
    }

    return {
      changeLongitude, longitude, typeOptions, columns, data, handleClick, title

    }
  },
})
</script>
<style scoped lang=less>
.overview {
  width: 100%;
  height: 100%;
  padding-top: 80px;
  box-sizing: border-box;

  .top {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;

    ::v-deep .ant-select-selector {
      color: #fff !important;
    }

    .longitude-display {
      margin: 0 20px;
      font-size: 24px;
      color: #fff;
    }

    .button-group {
      display: flex;
      align-items: center;
    }

    button {
      margin: 5px;
      padding: 10px;
      font-size: 16px;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      color: white;
      transition: background-color 0.3s ease;
    }

    button:hover {
      background-color: #ccc;
    }
  }

  .bottom {
    width: 100%;
    height: calc(100% - 100px);
    // background: pink;
    margin-top: 10px;

    //表格头部样式
    ::v-deep .ant-table-title {
      text-align: center !important;
      height: 30px;
      padding: 0;
      line-height: 30px;
      font-size: 15px;
    }

    ::v-deep .ant-table-thead>tr>th {
      padding: 5px 0;
      border: 0.5px solid #ccc !important;
      box-sizing: border-box;
    }

    ::v-deep .ant-table-tbody>tr>td {
      border: 0.5px solid #ccc;
      box-sizing: border-box;
      padding: 10px 0;
    }

    ::v-deep .ant-table-thead>tr>th .anticon-filter {
      // right: null;
      // position: relative;
      // height: 18px;
      // text-align: center;
    }

    ::v-deep .ant-table-thead>tr>th.ant-table-column-has-actions.ant-table-column-has-filters {
      // padding-right: 0 !important;
    }
  }

  ::v-deep {

    .ant-table-thead>tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
    .ant-table-tbody>tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
    .ant-table-thead>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
    .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td {
      color: #000 !important;
    }
  }
}
</style>